<template>
  <div class="contianer">
   <!-- 讨论 -->
    <div class="discussion-div">
       <!-- 标题 -->
     <div class="title-div padding-bottom-20">{{discussionDetail.title}}</div>
     <!-- 发件人及时间 -->
      <div class="send-div padding-bottom-20">
        <span class="send-span">发件人：{{discussionDetail.sender}}</span>
        <span class="send-time-span">{{discussionDetail.createTime}}</span>
      </div>
      <!-- 收件班级 -->
       <div class="receiver-div padding-bottom-20">收件人：{{discussionDetail.gradeName}}</div>
       <!-- 内容 -->
        <div class="content-div padding-bottom-20">{{discussionDetail.content}}</div>
       <!-- 分隔线 -->
       <el-divider><i class="el-icon-chat-line-square"></i></el-divider>
        <div class="all-reply-div">全部回复</div>
        <!-- 回复开始 -->
          <!--一级评论输入框-->
          <div  class="parentCommentInp " style="background-color: #F7F9FB;">
            <!-- <img  src="https://rpsm.oss-cn-chengdu.aliyuncs.com/1.jpg" alt="头像"> -->
            <el-input class="textAreaBg"
            type="textarea"
            :rows="5" resize="none"
            placeholder="请输入内容"
            v-model="parentComemnt">
            </el-input>
            <el-button type="primary" class="commentPubBtn" round @click="addReply(null)">回复</el-button>
        </div>
        <!--评论-->
        <div>
             
          <div class="parentComment" v-for="parentCommend in commendList" 
          
          :key="parentCommend.id">
              <div class="flex-between">
                  <div class="commentUserInfo flex-center">
                      <img  :src="parentCommend.avatar" alt="头像">
                      {{ parentCommend.realName }} 
                      {{ parentCommend.createTime }} 
                  </div>
                  <div style="display: flex;">
                      
                      <span  class="childenCommentInputShow" slot="reference">
                          <i class="el-icon-chat-dot-square" style="margin-right: 20px;"
                          @click="isShowCommentInput(parentCommend.id)"
                          ></i>
                          <i class="el-icon-delete" 
                          v-if="currentUserId === parentCommend.userId || currentRole === 'teacher'"
                          @click="showIsDel(parentCommend.id)"
                          ></i>
                      </span>
                    
                     <!-- <div>
                      <i class="iconfont icon-dianzan" @click.once="addLikeComment(parentCommend.comment_id)"></i>
                      {{!parentCommend.comment_like?"":parentCommend.comment_like}}
                     </div> -->
                  </div> 
              </div>
              
              {{ parentCommend.content }}
              <!-- 二级评论输入框 -->
              <div :id="parentCommend.id" class="childenCommentInput " >
                  <!-- <img class="flex-center" src="https://rpsm.oss-cn-chengdu.aliyuncs.com/1.jpg" alt="头像"> -->
                  <el-input class="textAreaBg"
                  type="textarea"
                  :rows="3" resize="none"
                  placeholder="请输入内容"
                  v-model="childenComment">
                  </el-input>
                  <el-button type="primary" class="commentPubBtn" round @click="addReply(parentCommend.id)">回复</el-button>
              </div>
              <div class="childenComment" v-for="childenComment in parentCommend.childReplies"
              :key="childenComment.id">
                  <div class="flex-between">
                      <div class="commentUserInfo flex-center">
                          <img  :src="childenComment.avatar" alt="头像">
                          {{ childenComment.realName }} 
                          {{ childenComment.createTime }}
                      </div>
                      <span  class="childenCommentInputShow" slot="reference">
                        <i class="el-icon-delete"
                         v-if=" currentUserId === childenComment.userId || currentRole === 'teacher' "
                        @click="showIsDel(childenComment.id)"
                        ></i>
                    </span>
                      <!-- <div class="likeInfo">
                          <i class="iconfont icon-dianzan" @click.once="addLikeComment(childenComment.comment_id)"></i>
                          {{!childenComment.comment_like?"":childenComment.comment_like}}
                      </div>  -->
                      
                  </div>
                  {{ childenComment.content }}
              </div>
          </div>
      </div>
         <!-- 回复结束 -->
      </div>
  </div>
</template>

<script>
import {discussionDetail} from '@/api/discussion'
import {replyAdd,replyDel,replyquery} from '@/api/reply'
import {getUserId,getRole,getDiscussionId,setDiscussionId} from '@/utils/auth'
export default {
  
  data() {
    return {
      currentRole:null,
      currentUserId:null,
      currentDiscussionId:null,
      discussionDetail:{},
      parentComemnt:null,
      childenComment:null,
      replyForm:{
        discussionId:null,
        parentId:null,
        content:null
      },
      commendList:[]
    }
  },
  methods: {
    //获取讨论详情
    getDiscussion(){
      discussionDetail(this.currentDiscussionId).then(res=>{
        if(res.code){
          this.discussionDetail = res.data
        }else{
          this.$message({type:'error',message:res.msg})
        }
      })
    },
    //新增一级回复
    addReply(id){
     const data={
        discussionId:this.currentDiscussionId,
        parentId:id,
        content:id===null?this.parentComemnt:this.childenComment
      }
      replyAdd(data).then(res=>{
        if(res.code){
          this.$message({type:'success',message:res.msg})
          this.parentComemnt = null
          this.childenComment = null
          this.queryReply()
        }else{
          this.$message({type:'error',message:res.msg})
        }
      })
      //添加完子评论隐藏子回复框
      if(id){
        this.noneCommentInput(id)
      }
    },
    //删除回复
    delReply(id){
      replyDel(id).then(res=>{
        if(res.code){
          this.$message({type:'success',message:res.msg})
          this.queryReply()
        }else{
          this.$message({type:'error',message:res.msg})
        }
      })
    },
    
    //获取回复
    queryReply(){
      replyquery(this.currentDiscussionId).then(res=>{
        if(res.code){
          this.commendList = res.data
        }else{
          this.$message({type:'error',message:res.msg})
        }
      })
    },
    //展示是否删除
    showIsDel(id){

        this.$confirm('此操作将永久删除该回复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.delReply(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //展示子评论输入框
    isShowCommentInput(id){
            var count = 0
            for(const c of this.commendList){
                if(c.id == id){  
                    count =  c.total+=1
                }
            }
          
            if(count%2 != 0){
                this.showCommentInput(id)
            }else{
                this.noneCommentInput(id)
            }
            
        },
        //展示二级评论输入框
        showCommentInput(id){
            document.getElementById(id).style.display='block'
        },
        //隐藏二级评论输入框
        noneCommentInput(id){
             document.getElementById(id).style.display='none'
        },
  },
  created() {
    this.currentRole = getRole()
    this.currentUserId = parseInt(getUserId())
    this.currentDiscussionId = this.$route.query.discussionId
    if(this.currentDiscussionId){
      //获取到讨论id，将它放进浏览器本地存储中
      setDiscussionId(this.currentDiscussionId)
    }else{
      //路由中拿不到，就从浏览器本地存储中拿去上次的讨论id
      this.currentDiscussionId = getDiscussionId()
    }
    //获取讨论详情
    this.getDiscussion()
    //获取回复
    this.queryReply()
  }
};
</script>

<style scoped>
.contianer{
  display: flex;
  flex-direction: column;
  padding: 30px;
}
.discussion-div{
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.padding-bottom-20{
  padding: 0 0 20px 0;
}
.title-div{
  border-bottom: 1px solid #ddd;
  font-size: 20px;
}
.send-div{
  margin-top: 20px;
}
.send-span{
  color: rgb(83, 83, 83);
}
.send-time-span{
  margin-left: 30px;
  color: #858585;
  font-size: 14px;
}
.receiver-div{
  color: #858585;
  font-size: 14px;
}
.content-div{
  margin-top: 10px;
  font-size: 18px;
}
.all-reply-div{
  font-size: 20px;
  margin-bottom: 30px;
}


.likeInfo{
  display: flex;
}
.likeInfo>i{
  margin-left: 10px;
}
.mssage>div[data-v-a60f0d8e] {
  margin-bottom: 0px;
}
.el-button{
  padding: 0;
}
.commentPubBtn{
 
  width: 100px;
  height: 40px;
}
.textAreaBg >>> .el-textarea__inner::placeholder{
  color: #a2a2a2;
}
.textAreaBg >>> .el-textarea__inner {
  background-color: #F7F9FB ; 
  border: none;
  border-radius: 10px;
  color: #000;
  
}
.parentCommentInp,.childenCommentInput{
  border-radius: 10px;
}
  .childenCommentInput{
    width: 100%;
      margin: 10px 0;
      text-align: right;
      background-color: #F7F9FB;
      display: none;
  }
  .childenCommentInputShow{
      margin-right: 10px;
      display: none;
  }
  .parentComment:hover .childenCommentInputShow{
      display: block;
  }
  .flex-between{
      display: flex;
      justify-content: space-between;
  }
  .commentUserInfo{
      color: #777888;
      margin-bottom: 10px;
  }
  .parentComment{
      width:1200px; 
      /*height:300px; */
     /* background-color: red; */
      margin: 30px;
      word-wrap: break-word; /* 允许长单词换行 */
      word-break: break-all; /* 强制在任意位置换行 */
      white-space: normal;   /* 默认值，允许换行 */
     
  }
  .childenComment{
      width: 1200px; 
      /* height:150px;  */
      /*background-color: rgb(235, 225, 225);*/
      padding: 10px 0 0 50px;
      word-wrap: break-word; /* 允许长单词换行 */
      word-break: break-all; /* 强制在任意位置换行 */
      white-space: normal;   /* 默认值，允许换行 */
  }
  .parentCommentInp{
     width: 1200px;
      margin: 30px;
      text-align: right;
  }
  
  .messageFonter{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 60px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .messageTitle{
      font-size: 25px;
  }
  .messageInfo{
      width: 100%;
      height: 60px;
      background-color: rgb(248,248,248);
  }
  .messageFonter ul li{
      font-size: 20px;
      margin: 0 10px;
  }
  .messageFonter ul li i{
      font-size: 20px;
  }
  .messageInfo ul,.messageFonter ul{
      display: flex;
      color: #999AAA;
  }
  
  .messageInfo li{
      font-size: 14px;
      margin: 20px 30px 10px 10px;
  }
  .messageContent{
      line-height: 50px;
      text-indent:2em;
  }
  .mssage>div{
      margin-bottom: 30px;
  }
  .flex-center{
      display: flex;
      align-items: center;
     
  }
  img{
      height: 30px; 
      width:30px;
      margin-right: 10px;
  }
</style>